<template>
  <div class="edit">
    <div id="user">
      <form action="#">
        <h3>编辑资料</h3>
        <label for="">修改用户名：</label>
        <input type="text" id="txtName" placeholder="请输入新用户名" required v-model="userName" />
        <br />
        <label for>原密码：</label>
        <input type="password" id="txtPassword" placeholder="请输入原密码 " required v-model="changeInf.oldPassword" />
        <br />
        <label for>新密码：</label>
        <input type="password" id="reset" placeholder="请输入新密码 " required v-model="changeInf.newPassword" />
        <br />
        <label for>重复密码：</label>
        <input type="password" id="txtqueren" placeholder="请确认密码" required v-model="newPassword2" />
        <br />
        <input type="button" id="btnLogin" value="确认修改" @click="gologin()" />
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newPassword2: "",
      userName:'',
      changeInf: {
        oldPassword: "",
        newPassword: ""
      }
    };
  },
  methods: {
    gologin: function() {
      
      if (
        this.changeInf.newPassword.length != 6 ||
        this.newPassword2.length != 6
      ) {
        alert("密码为6位数！");
      } else if (this.changeInf.newPassword != this.newPassword2) {
        alert("输入新密码与确认新密码值不一致！");
      } else {
        this.$axios
          .post("http://localhost:3000/users/changepassword", this.changeInf)
          .then(res => {
            // alert("密码修改成功！");
            console.log("查询结构是", res);
          })
          .catch(err => {
            console.log("错误信息是", err);
          });

          this.$axios.post("http://localhost:3000/users/changeUsername",{userName:this.userName})
          .then(res=>{
            console.log(res)
            alert('修改成功！')
          })
          .catch(err=>{
            console.log("错误信息是", err)
          })
      }
    }
  }
};
</script>
<style>
#user {
  width: 60%;
  margin: 10px auto;
  border: 1px solid #ccc;
  background-color: #ddd;
}

#user form {
  text-align: center;
  width: 80%;
  margin: 10px auto;
  border: 1px solid #ccc;
  background-color: #fff;
}
#user form h3 {
  background: linear-gradient(45deg, rgb(160, 191, 124), rgb(255, 255, 255))
    fixed;
  height: 50px;
  line-height: 50px;
}

#user label {
  width: 100px;
  margin: 0 auto;
}

#user input {
  width: 150px;
  height: 30px;
  margin-top: 10px;
}

#user #btnLogin {
  color: #fff;
  background: linear-gradient(rgb(114, 126, 101), rgb(101, 147, 74));
  width: 100px;
  height: 25px;
  margin: 20px auto;
  border: 1px solid rgb(160, 190, 117);
}
</style>
